@import '../style/theme/color';
@import '../style/theme/shadow';
@import '../style/theme/corner';
@import '../style/core/animation';

:host {
  display: block;
}

:host ::ng-deep d-accordion-menu,
:host ::ng-deep d-accordion-item,
:host ::ng-deep d-accordion-item-hreflink,
:host ::ng-deep d-accordion-item-routerlink,
:host ::ng-deep d-accordion-list {
  display: block;
}

/* 菜单底色 */
:host ::ng-deep .devui-accordion-menu {
  display: block;
  background: $devui-base-bg;
  width: 100%;
  overflow-y: auto;
  border-radius: $devui-border-radius;
  height: 100%;

  &.devui-accordion-menu-normal {
    box-shadow: $devui-shadow-length-base $devui-shadow;
  }

  & > .devui-accordion-list {
    padding: 8px 0;
  }

  .devui-over-flow-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

:host ::ng-deep .devui-accordion-submenu {
  background: $devui-base-bg;
  width: 100%;
}

/* 单行菜单 */
:host ::ng-deep .devui-accordion-item-title {
  display: block;
  height: 40px;
  width: 100%;
  padding: 0 12px 0 20px;
  font-weight: normal;
  line-height: 40px;
  color: $devui-text-weak;
  background: transparent;
  cursor: pointer;

  &.disabled {
    color: $devui-disabled-text;
    cursor: not-allowed;

    & > a {
      color: $devui-disabled-text;
    }
  }

  &:not(.disabled) {
    &:hover {
      background: $devui-list-item-hover-bg;
      color: $devui-list-item-hover-text;
    }

    &.devui-router-active,
    &.active:not(.open) {
      color: $devui-brand-active;
      font-weight: bold;

      & > a {
        color: $devui-brand-active;
      }
    }
  }

  & > a {
    text-decoration: none;
    display: block;
    width: 100%;
    color: $devui-text-weak;

    &:hover {
      color: inherit;
      text-decoration: none;
    }
  }
}

/* 解决链接可点击区域大小不是100%宽度问题 */
:host ::ng-deep d-accordion-item-hreflink,
:host ::ng-deep d-accordion-item-routerlink {
  &.devui-accordion-item-title {
    padding: 0;

    & > a {
      padding: 0 12px 0 20px;
    }
  }
}

:host ::ng-deep .devui-accordion-menu-item {
  overflow-y: hidden;
}

/* 展开图标相关 */
:host ::ng-deep .devui-accordion-menu-item > .devui-accordion-item-title {
  position: relative;

  & > .devui-accordion-open-icon {
    display: inline-block;
    text-indent: 0;
    pointer-events: none; /* 让鼠标穿透 */
    position: absolute;
    right: 10px;
    top: 12px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    transition: transform $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;

    & > svg {
      width: 16px;
      height: 16px;

      path {
        fill: $devui-text-weak;
      }
    }
  }

  &:not(.open) {
    &.active {
      svg path {
        fill: $devui-icon-fill-active;
      }
    }
  }

  &.open > .devui-accordion-open-icon {
    transform: rotate(180deg);
    transform-origin: center;
  }

  &.disabled > .devui-accordion-open-icon {
    color: $devui-disabled-text;

    svg path {
      fill: $devui-disabled-text;
    }
  }
}

/* 可展开的菜单 */
:host ::ng-deep .devui-accordion-menu-item > .devui-accordion-item-title {
  padding-right: 28px;

  &.active:not(.open) {
    color: $devui-brand-active;
    background: transparent;
  }
}

/* 视觉融合灰线 */
:host ::ng-deep .devui-accordion-item-title {
  position: relative;

  .devui-accordion-splitter {
    position: absolute;
    display: inline-block;
    left: 10px;
    width: 2px;
    height: 40px;
    background: $devui-dividing-line;
    vertical-align: middle;

    &.devui-parent-list {
      background-color: transparent;
    }
  }

  .devui-accordion-splitter::before {
    content: '';
    display: block;
    width: 2px;
    height: 18px;
    background-color: $devui-form-control-line-active;
    position: absolute;
    top: 11px;
    left: 0;
    opacity: 0;
  }

  &.devui-router-active,
  &.active {
    &:not(.open) .devui-accordion-splitter::before {
      opacity: 1;
    }
  }
}

:host ::ng-deep .devui-accordion-show-animate .devui-accordion-item-title {
  transition:
    font-weight $devui-animation-duration-fast $devui-animation-ease-in-out-smooth,
    background-color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth;

  .devui-accordion-splitter::before {
    transform: scaleY(0);
    transition: transform $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
  }

  &.devui-router-active,
  &.active {
    &:not(.open) .devui-accordion-splitter::before {
      transform: scaleY(1);
    }
  }
}

:host ::ng-deep .devui-accordion-list > .devui-accordion-item:first-child {
  & > .devui-accordion-item-title,
  & > .devui-accordion-menu-item > .devui-accordion-item-title {
    & > a > .devui-accordion-splitter,
    & > .devui-accordion-splitter {
      height: 28px;
      top: 12px;

      &::before {
        top: 0;
      }
    }
  }
}

:host ::ng-deep .devui-accordion-list > .devui-accordion-item:last-child {
  & > .devui-accordion-item-title,
  & > .devui-accordion-menu-item > .devui-accordion-item-title {
    & > a > .devui-accordion-splitter,
    & > .devui-accordion-splitter {
      height: 28px;
      top: 0;

      &::before {
        top: initial;
        bottom: 0;
      }
    }
  }
}

:host ::ng-deep .devui-accordion-list > .devui-accordion-item:last-child:first-child {
  & > .devui-accordion-item-title,
  & > .devui-accordion-menu-item > .devui-accordion-item-title {
    & > a > .devui-accordion-splitter,
    & > .devui-accordion-splitter {
      height: 18px;
      top: 11px;
    }
  }
}
